<!DOCTYPE html>
<html lang=zh-CN>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta property="og:description" content="samuel-24276的博客">
    <meta property="og:type" content="website">
    <meta name="description" content="samuel-24276的博客">
    <meta name="keyword"  content="aircloud">
    <link rel="shortcut icon" href="/myblog/img/favicon.ico">

    <title>
        
        QT学习日记（3）——常用控件 - samuel-24276的博客 | samuel-24276&#39;s Blog
        
    </title>

    <!-- Custom CSS -->
    
<link rel="stylesheet" href="/myblog/css/aircloud.css">

    
<link rel="stylesheet" href="/myblog/css/gitment.css">

    <!--<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">-->
    <link href="//at.alicdn.com/t/font_620856_28hi1hpxx24.css" rel="stylesheet" type="text/css">
    <!-- ga & ba script hoook -->
    <script></script>
<meta name="generator" content="Hexo 7.1.1"></head>

<body>

<div class="site-nav-toggle" id="site-nav-toggle">
    <button>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
    </button>
</div>

<div class="index-about">
    <i> Like what you do, do what you like </i>
</div>

<div class="index-container">
    
    <div class="index-left">
        
<div class="nav" id="nav">
    <div class="avatar-name">
        <div class="avatar ">
            <img src="/myblog/img/avatar.jpg" />
        </div>
        <div class="name">
            <i>samuel-24276</i>
        </div>
    </div>
    <div class="contents" id="nav-content">
        <ul>
            <li >
                <a href="/myblog/">
                    <i class="iconfont icon-shouye1"></i>
                    <span>主页</span>
                </a>
            </li>
            <li >
                <a href="/myblog/tags">
                    <i class="iconfont icon-biaoqian1"></i>
                    <span>标签</span>
                </a>
            </li>
            <li >
                <a href="/myblog/archives">
                    <i class="iconfont icon-guidang2"></i>
                    <span>存档</span>
                </a>
            </li>
            <li >
                <a href="/myblog/collect/">
                    <i class="iconfont icon-shoucang1"></i>
                    <span>收藏</span>
                </a>
            </li>
            <li >
                <a href="/myblog/about/">
                    <i class="iconfont icon-guanyu2"></i>
                    <span>关于</span>
                </a>
            </li>
            
            <li>
                <a id="search">
                    <i class="iconfont icon-sousuo1"></i>
                    <span>搜索</span>
                </a>
            </li>
            
        </ul>
    </div>
    
        <div id="toc" class="toc-article">
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#8-%E5%B8%B8%E7%94%A8%E6%8E%A7%E4%BB%B6"><span class="toc-text">8.常用控件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#8-1-%E6%B7%BB%E5%8A%A0%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6"><span class="toc-text">8.1.添加资源文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-2-%E6%8C%89%E9%92%AE%E7%BB%84Buttons"><span class="toc-text">8.2.按钮组Buttons</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-3-QDialog%E5%AF%B9%E8%AF%9D%E6%A1%86"><span class="toc-text">8.3.QDialog对话框</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-4-ItemWidget"><span class="toc-text">8.4.ItemWidget</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-5-Containers%E5%AE%B9%E5%99%A8"><span class="toc-text">8.5.Containers容器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-6-Input-Widget%E8%BE%93%E5%85%A5%E7%AA%97%E5%8F%A3"><span class="toc-text">8.6.Input Widget输入窗口</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-7-Display-Widget%E5%B1%95%E7%A4%BA%E7%AA%97%E5%8F%A3"><span class="toc-text">8.7.Display Widget展示窗口</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#9-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8E%A7%E4%BB%B6%E2%80%94%E2%80%94%E4%BF%AE%E6%94%B9%E5%80%BC%E6%BB%9A%E5%8A%A8%E6%9D%A1%E5%8A%A8%EF%BC%8C%E6%BB%9A%E5%8A%A8%E6%9D%A1%E5%8A%A8%E5%80%BC%E4%BF%AE%E6%94%B9"><span class="toc-text">9.自定义控件——修改值滚动条动，滚动条动值修改</span></a></li></ol>
</div>
    
</div>


<div class="search-field" id="search-field">
    <div class="search-bg" id="search-bg"></div>
    <div class="search-container">
        <div class="search-input">
            <span id="esc-search"> <i class="icon-fanhui iconfont"></i></span>
            <input id="search-input"/>
            <span id="begin-search">搜索</span>
        </div>
        <div class="search-result-container" id="search-result-container">

        </div>
    </div>
</div>

        <div class="index-about-mobile">
            <i> Like what you do, do what you like </i>
        </div>
    </div>
    
    <div class="index-middle">
        <!-- Main Content -->
        


<div class="post-container">
    <div class="post-title">
        QT学习日记（3）——常用控件
    </div>

    <div class="post-meta">
        <span class="attr">发布于：<span>2019-09-29 21:24:38</span></span>
        
        <span class="attr">标签：/
        
        <a class="tag" href="/myblog/tags/#Qt" title="Qt">Qt</a>
        <span>/</span>
        
        
        </span>
        <span class="attr">访问：<span id="busuanzi_value_page_pv"></span>
</span>
</span>
    </div>
    <div class="post-content no-indent">
        <h1 id="8-常用控件"><a href="#8-常用控件" class="headerlink" title="8.常用控件"></a>8.常用控件</h1><h2 id="8-1-添加资源文件"><a href="#8-1-添加资源文件" class="headerlink" title="8.1.添加资源文件"></a>8.1.添加资源文件</h2><p>在项目名上右键Add New-&gt;Qt-&gt;Resource File-&gt;命名资源文件生成xxx.qrc，在xxx.qrc上右键open in editor，添加，修改前缀为&#x2F;,添加资源文件，选中所需文件即可。</p>
<figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//资源文件的使用方式“ ： + 前缀名 + 文件名”</span></span><br><span class="line">ui-&gt;actionnew-&gt;<span class="built_in">setIcon</span>(<span class="built_in">QIcon</span>(<span class="string">&quot;:/ /img/new.svg&quot;</span>));</span><br></pre></td></tr></table></figure>
<p>注意：冒号后有空格，最简单的方法是直接在资源文件上右键copy path，actionnew是被添加图标的QAction名字。</p>
<h2 id="8-2-按钮组Buttons"><a href="#8-2-按钮组Buttons" class="headerlink" title="8.2.按钮组Buttons"></a>8.2.按钮组Buttons</h2><ul>
<li>1.QPushButton按钮<ul>
<li>1.显示按钮（带文字）  <figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">Widget::<span class="built_in">Widget</span>(QWidget *parent)</span><br><span class="line">    : <span class="built_in">QWidget</span>(parent)</span><br><span class="line">    , <span class="built_in">ui</span>(<span class="keyword">new</span> Ui::Widget)</span><br><span class="line">&#123;</span><br><span class="line">    ui-&gt;<span class="built_in">setupUi</span>(<span class="keyword">this</span>);</span><br><span class="line">    QPushButton *btn = <span class="keyword">new</span> QPushButton;  <span class="comment">//创建按钮对象</span></span><br><span class="line">    btn-&gt;<span class="built_in">show</span>();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
  创建按钮对象并显示，但是show()函数默认是顶层方式弹出窗口，所以会出现两个独立窗口，更改代码如下：  <figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">btn-&gt;<span class="built_in">setParent</span>(<span class="keyword">this</span>);</span><br><span class="line">    <span class="comment">//显示文本</span></span><br><span class="line">    btn-&gt;<span class="built_in">setText</span>(<span class="string">&quot;按钮&quot;</span>);     <span class="comment">//若中文乱码，则工具-&gt;选项-&gt;文本编辑器-&gt;默认编码格式修改为UTF-8</span></span><br><span class="line">    <span class="comment">//创建第二个按钮</span></span><br><span class="line">    QPushButton *btn2 = <span class="keyword">new</span> <span class="built_in">QPushButton</span>(<span class="string">&quot;按钮2&quot;</span>);</span><br><span class="line">    btn2-&gt;<span class="built_in">setParent</span>(<span class="keyword">this</span>);</span><br></pre></td></tr></table></figure>
  若显示按钮的文字时乱码，则工具-&gt;选项-&gt;文本编辑器-&gt;默认编码格式修改为UTF-8。</li>
<li>2.设置窗口属性<br>  运行后发现，第二个按钮覆盖第一个按钮，所以需要移动第二个按钮： <code>btn2-&gt;move(100,100);</code>。<br>  但是注释掉第一个按钮的代码后再运行，发现窗口变大了，需要重新设置窗口大小：<code>this-&gt;resize(600, 400);</code>。<br>  设置窗口标题：<code>this-&gt;setWindowTitle(&quot;第一个项目&quot;);</code><br>  设置固定窗口大小：<code>this-&gt;setFixedSize(600, 400);</code>  </li>
<li>3.给窗口添加图标<br>  在项目名上右键Add New-&gt;Qt Resource-&gt;建立资源文件res-&gt;添加前缀&#x2F;-&gt;添加文件-&gt;选中后构建即可看到。之后在ui文件的设计模式中新建一个QPushButton按钮，在右下角的QAbstractButton找到icon属性，点击右边的的下箭头-&gt;选择资源，即可添加图标。</li>
</ul>
</li>
<li>2.Tool Button按钮<br>主要用来显示图片，在ui文件设计模式中拖拽一个Tool Button按钮,点击右下角的icon属性-&gt;下箭头-&gt;选择资源，即可设置显示的图片。可以通过iconSize属性修改显示图片的宽高；若想要也显示文字，可在QToolButton的toolButtonStyle属性，将其修改为ToolButtonTextBesideIcon,即可在图片后显示文字；勾选属性autoRaise实现鼠标悬停时按钮凸出。</li>
<li>3.Radio Button单选按钮<br>针对多组单选，使用Containers-&gt;Group Box将多个单选按钮放入其中，并进行布局，之后再拖拽别的Group Box存放其他单选按钮，即可实现多组单选按钮无干扰。<br>默认选中哪个单选按钮由代码实现，点击Radio Button单选按钮，即可在右下角的QObject中修改其值(也就是代码中的变量名),<code>ui-&gt;radioButton-&gt;setChecked(true);</code>即可将第一个单选按钮设为默认。</li>
<li>4.Check Box复选框<br>将多个复选框放入Group Box，垂直布局，在widget.cpp的构造函数中添加代码：  <figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">connect</span>(ui-&gt;checkBox, &amp;QCheckBox::stateChanged, [=](<span class="type">int</span> state)&#123;</span><br><span class="line">    <span class="built_in">qDebug</span>()&lt;&lt;<span class="string">&quot;state=&quot;</span>&lt;&lt;state;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
  stateChanged有三种状态，不像clicked有两种状态，点击第一个复选框，在右下角的QCheckBox找到tristate，勾选后即可显示三种状态的中间状态：半选，状态号为1 。</li>
</ul>
<h2 id="8-3-QDialog对话框"><a href="#8-3-QDialog对话框" class="headerlink" title="8.3.QDialog对话框"></a>8.3.QDialog对话框</h2><ul>
<li><p>1.自定义对话框<br>利用ui文件创建出文件-&gt;新建,之后再创建对话框，对话框分为模态对话框和非模态对话框。模态对话框打开后不能对其他窗口进行操作，但可以继续直接敲代码；非模态对话框打开后可以对其他窗口进行操作，但不能继续直接敲代码，否则会有警报声。QDialog项目下的mainwindow.cpp包含头文件<code>#include&lt;QDialog&gt;</code>，代码如下：</p>
  <figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">ui-&gt;<span class="built_in">setupUi</span>(<span class="keyword">this</span>);</span><br><span class="line"><span class="comment">//需求：点击新建，弹出对话框</span></span><br><span class="line"><span class="built_in">connect</span>(ui-&gt;actionnew, &amp;QAction::triggered, [=]()&#123;</span><br><span class="line"><span class="built_in">qDebug</span>()&lt;&lt;<span class="string">&quot;弹出对话框&quot;</span>;</span><br><span class="line"><span class="comment">//对话框分为模态对话框和非模态对话框。</span></span><br><span class="line"><span class="comment">//模态对话框     不能对其他窗口进行操作（阻塞功能实现），但可以继续直接敲代码</span></span><br><span class="line"><span class="comment">//        QDialog dlg(this);</span></span><br><span class="line"><span class="comment">//        dlg.resize(120, 60);</span></span><br><span class="line"><span class="comment">//        dlg.exec();     //阻塞功能</span></span><br><span class="line"><span class="comment">//非模态对话框    可以对其他窗口进行操作，但不能继续直接敲代码，否则会有警报声。</span></span><br><span class="line"><span class="comment">//        QDialog dlg2(this);     //在Lambda创建对象，执行完了对象就没了，因此一闪而过</span></span><br><span class="line"><span class="comment">//        dlg2.resize(120, 60);</span></span><br><span class="line"><span class="comment">//        dlg2.show();</span></span><br><span class="line">QDialog * dlg3 = <span class="keyword">new</span> <span class="built_in">QDialog</span>(<span class="keyword">this</span>);     <span class="comment">//在Lambda创建对象，执行完了对象就没了，因此一闪而过</span></span><br><span class="line">dlg3-&gt;<span class="built_in">resize</span>(<span class="number">120</span>, <span class="number">60</span>);</span><br><span class="line">dlg3-&gt;<span class="built_in">show</span>();</span><br><span class="line">dlg3-&gt;<span class="built_in">setAttribute</span>(Qt::WA_DeleteOnClose);<span class="comment">//55号属性,帮助文档可查</span></span><br></pre></td></tr></table></figure></li>
<li><p>2.标准对话框<br>包含头文件<code>#include&lt;QDialog&gt;</code>和<br><code>#include&lt;QMessageBox&gt;</code></p>
<ul>
<li>1.错误提示对话框<br><code>QMessageBox::critical(this, &quot;错误&quot;, &quot;error&quot;);//静态成员函数通过类调用</code></li>
<li>2.信息提示对话框<br><code>QMessageBox::information(this, &quot;信息提示&quot;, &quot;information&quot;);</code></li>
<li>3.提问对话框,多了一个参数4和参数5，4是按键类型，有ok,open,save,cancle,apply,close,discard,reset，help等；5是关联回车按键的选择，返回类型是StandButton  <figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(QMessageBox::Save ==QMessageBox::<span class="built_in">question</span>(<span class="keyword">this</span>, <span class="string">&quot;提问&quot;</span>, <span class="string">&quot;question&quot;</span>, QMessageBox::Save | QMessageBox::Cancel, QMessageBox::Save))</span><br><span class="line">&#123;</span><br><span class="line">    <span class="built_in">qDebug</span>()&lt;&lt;<span class="string">&quot;保存&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">qDebug</span>()&lt;&lt;<span class="string">&quot;取消&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>4.警告对话框<br> <code>QMessageBox::warning(this, &quot;警告&quot;, &quot;warning&quot;);</code></li>
</ul>
<blockquote>
<p>总结：标准对话框弹出的都是模态对话框；利用静态成员函数，可以提示不同对话框</p>
</blockquote>
</li>
<li><p>3.文件对话框QFileDialog<br>包含头文件<code>#include&lt;QFileDialog&gt;</code>，代码如下：</p>
<figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">connect</span>(ui-&gt;actionopen, &amp;QAction::triggered, [=]()&#123;</span><br><span class="line">    <span class="comment">//文件对话框 参数1 父窗口 参数2 标题 参数3 默认打开路径 参数4 过滤后缀名</span></span><br><span class="line">    QString fileName = QFileDialog::<span class="built_in">getOpenFileName</span>(<span class="keyword">this</span>, <span class="string">&quot;文件&quot;</span>, <span class="string">&quot;C:\\Users\\DEll\\Desktop&quot;</span>, <span class="string">&quot;(*.jpg)&quot;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li>
<li><p>4.颜色对话框QColorDialog<br>包含头文件<code>#include&lt;QColorDialog&gt;</code>,代码如下：</p>
<figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">connect</span>(ui-&gt;actioncolor, &amp;QAction::triggered, [=]()&#123;</span><br><span class="line">    QColor color = QColorDialog::<span class="built_in">getColor</span>(<span class="built_in">QColor</span>(<span class="number">255</span>,<span class="number">0</span>,<span class="number">0</span>));</span><br><span class="line">    <span class="built_in">qDebug</span>()&lt;&lt;color.<span class="built_in">red</span>()&lt;&lt;color.<span class="built_in">green</span>()&lt;&lt;color.<span class="built_in">blue</span>();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li>
<li><p>4.字体对话框QFontDialog<br>包含头文件<code>#include&lt;QFontDialog&gt;</code>，代码如下：</p>
<figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">connect</span>(ui-&gt;actionfont, &amp;QAction::triggered, [=]()&#123;</span><br><span class="line">    <span class="type">bool</span> ok;</span><br><span class="line">    QFont font = QFontDialog::<span class="built_in">getFont</span>(&amp;ok, <span class="built_in">QFont</span>(<span class="string">&quot;宋体&quot;</span>, <span class="number">36</span>));</span><br><span class="line">    <span class="built_in">qDebug</span>()&lt;&lt;<span class="string">&quot;字体&quot;</span>&lt;&lt;font.<span class="built_in">family</span>().<span class="built_in">toUtf8</span>().<span class="built_in">data</span>()&lt;&lt;<span class="string">&quot;字号&quot;</span>&lt;&lt;font.<span class="built_in">pointSize</span>()&lt;&lt;<span class="string">&quot;是否倾斜&quot;</span>&lt;&lt;font.<span class="built_in">italic</span>()&lt;&lt;<span class="string">&quot;是否加粗&quot;</span>&lt;&lt;font.<span class="built_in">bold</span>();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="8-4-ItemWidget"><a href="#8-4-ItemWidget" class="headerlink" title="8.4.ItemWidget"></a>8.4.ItemWidget</h2><ul>
<li><p>1.QListWidget列表控件  </p>
  <figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//ListWidget</span></span><br><span class="line">QListWidgetItem * item = <span class="keyword">new</span> <span class="built_in">QListWidgetItem</span>(<span class="string">&quot;悯农&quot;</span>);</span><br><span class="line">ui-&gt;listWidget-&gt;<span class="built_in">addItem</span>(item);</span><br><span class="line">item-&gt;<span class="built_in">setTextAlignment</span>(Qt::AlignHCenter);<span class="comment">//水平居中</span></span><br><span class="line"><span class="comment">//添加字符串列表，但无法进行对齐</span></span><br><span class="line">QStringList list;</span><br><span class="line">list&lt;&lt;<span class="string">&quot;锄禾日当午&quot;</span>&lt;&lt;<span class="string">&quot;汗滴禾下土&quot;</span>&lt;&lt;<span class="string">&quot;谁知盘中餐&quot;</span>&lt;&lt;<span class="string">&quot;粒粒皆辛苦&quot;</span>;</span><br><span class="line">ui-&gt;listWidget-&gt;<span class="built_in">addItems</span>(list);</span><br></pre></td></tr></table></figure>
<ul>
<li>1.QListWidget每个项都称为item，要想使用，先new出来。</li>
<li>2.添加item，<code>ui-&gt;listWidget-&gt;addItem(item);</code></li>
<li>3.设置对齐，<code>setTextAlignment(Qt::AlignHCenter);//水平居中</code></li>
<li>4.一次性加入所有数据，<code>ui-&gt;listWidget-&gt;addItems(list);</code></li>
</ul>
</li>
<li><p>2.QTreeWidget树控件  </p>
<p>  新建项目QTreeWidget，在其widget.cpp的构造函数中添加以下代码：</p>
  <figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//设置头</span></span><br><span class="line">ui-&gt;treeWidget-&gt;<span class="built_in">setHeaderLabels</span>(<span class="built_in">QStringList</span>()&lt;&lt;<span class="string">&quot;英雄&quot;</span>&lt;&lt;<span class="string">&quot;英雄介绍&quot;</span>);</span><br><span class="line"><span class="comment">//TreeWidget中每个项目都称为QTreeWidgetItem</span></span><br><span class="line">QTreeWidgetItem * adItem = <span class="keyword">new</span> <span class="built_in">QTreeWidgetItem</span>(<span class="built_in">QStringList</span>()&lt;&lt;<span class="string">&quot;物理英雄&quot;</span>);</span><br><span class="line">QTreeWidgetItem * apItem = <span class="keyword">new</span> <span class="built_in">QTreeWidgetItem</span>(<span class="built_in">QStringList</span>()&lt;&lt;<span class="string">&quot;魔法英雄&quot;</span>);</span><br><span class="line"><span class="comment">//添加根节点</span></span><br><span class="line">ui-&gt;treeWidget-&gt;<span class="built_in">addTopLevelItem</span>(adItem);</span><br><span class="line">ui-&gt;treeWidget-&gt;<span class="built_in">addTopLevelItem</span>(apItem);</span><br><span class="line">QStringList hero1;</span><br><span class="line">hero1&lt;&lt;<span class="string">&quot;剑魔&quot;</span>&lt;&lt;<span class="string">&quot;恕瑞玛飞升者&quot;</span>;</span><br><span class="line">QStringList hero2;</span><br><span class="line">hero2&lt;&lt;<span class="string">&quot;盖伦&quot;</span>&lt;&lt;<span class="string">&quot;德玛西亚之力&quot;</span>;</span><br><span class="line">QStringList hero3;</span><br><span class="line">hero3&lt;&lt;<span class="string">&quot;瑞兹&quot;</span>&lt;&lt;<span class="string">&quot;符文法师&quot;</span>;</span><br><span class="line">QStringList hero4;</span><br><span class="line">hero4&lt;&lt;<span class="string">&quot;奥丽安娜&quot;</span>&lt;&lt;<span class="string">&quot;发条魔灵&quot;</span>;</span><br><span class="line"><span class="comment">//添加子节点</span></span><br><span class="line">QTreeWidgetItem * h1 = <span class="keyword">new</span> <span class="built_in">QTreeWidgetItem</span>(hero1);</span><br><span class="line">adItem-&gt;<span class="built_in">addChild</span>(h1);</span><br><span class="line">QTreeWidgetItem * h2 = <span class="keyword">new</span> <span class="built_in">QTreeWidgetItem</span>(hero2);</span><br><span class="line">adItem-&gt;<span class="built_in">addChild</span>(h2);</span><br><span class="line">QTreeWidgetItem * h3 = <span class="keyword">new</span> <span class="built_in">QTreeWidgetItem</span>(hero3);</span><br><span class="line">apItem-&gt;<span class="built_in">addChild</span>(h3);</span><br><span class="line">QTreeWidgetItem * h4 = <span class="keyword">new</span> <span class="built_in">QTreeWidgetItem</span>(hero4);</span><br><span class="line">apItem-&gt;<span class="built_in">addChild</span>(h4);</span><br></pre></td></tr></table></figure></li>
<li><p>3.QTableWidget表格控件<br>  新建项目QTableWidget，在其widget.cpp的构造函数中添加以下代码：</p>
  <figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.设置列</span></span><br><span class="line">ui-&gt;tableWidget-&gt;<span class="built_in">setColumnCount</span>(<span class="number">3</span>);</span><br><span class="line"><span class="comment">//2.设置水平表头</span></span><br><span class="line">ui-&gt;tableWidget-&gt;<span class="built_in">setHorizontalHeaderLabels</span>(<span class="built_in">QStringList</span>()&lt;&lt;<span class="string">&quot;姓名&quot;</span>&lt;&lt;<span class="string">&quot;性别&quot;</span>&lt;&lt;<span class="string">&quot;年龄&quot;</span>);</span><br><span class="line"><span class="comment">//3.设置行数</span></span><br><span class="line">ui-&gt;tableWidget-&gt;<span class="built_in">setRowCount</span>(<span class="number">3</span>);</span><br><span class="line"><span class="comment">//4.设置具体内容</span></span><br><span class="line"><span class="comment">//ui-&gt;tableWidget-&gt;setItem(0,0,new QTableWidgetItem(&quot;张三&quot;));</span></span><br><span class="line">QStringList nameList;</span><br><span class="line">nameList&lt;&lt;<span class="string">&quot;张三&quot;</span>&lt;&lt;<span class="string">&quot;李四&quot;</span>&lt;&lt;<span class="string">&quot;王五&quot;</span>;</span><br><span class="line">QStringList sexList;</span><br><span class="line">sexList&lt;&lt;<span class="string">&quot;男&quot;</span>&lt;&lt;<span class="string">&quot;女&quot;</span>&lt;&lt;<span class="string">&quot;男&quot;</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="type">int</span> i=<span class="number">0</span>; i&lt;<span class="number">3</span>; ++i)</span><br><span class="line">&#123;</span><br><span class="line">    <span class="type">int</span> col=<span class="number">0</span>;</span><br><span class="line">    ui-&gt;tableWidget-&gt;<span class="built_in">setItem</span>(i,col++,<span class="keyword">new</span> <span class="built_in">QTableWidgetItem</span>(nameList[i]));</span><br><span class="line">    ui-&gt;tableWidget-&gt;<span class="built_in">setItem</span>(i,col++,<span class="keyword">new</span> <span class="built_in">QTableWidgetItem</span>(sexList[i]));</span><br><span class="line">    ui-&gt;tableWidget-&gt;<span class="built_in">setItem</span>(i,col++,<span class="keyword">new</span> <span class="built_in">QTableWidgetItem</span>(QString::<span class="built_in">number</span>(<span class="number">18</span>+i)));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="8-5-Containers容器"><a href="#8-5-Containers容器" class="headerlink" title="8.5.Containers容器"></a>8.5.Containers容器</h2><ul>
<li><p>1.Group Box分组容器</p>
</li>
<li><p>2.Scroll Area滚动区域容器<br>  向核心容器拖入一个Scroll Area后，向里面添加几个按钮，选择垂直布局，即可看到右边的滚动条。</p>
</li>
<li><p>3.Tool Box索引表容器<br>  向核心容器拖入一个Tool Box后，点击上面的page1，在右下角的QToolBox可以找到属性currentItemText,在里面可以修改索引的值。在右上角的toolBox QToolBox上右键，即可删除当前页、添加页、修改页的顺序。还可以向每页加入不同的内容，以实现每页内容都不同。</p>
</li>
<li><p>4.Tab Widget标签容器<br>  向核心容器拖入一个Tab Widget后，点击上面的标签，在右下角的QTabWidget可以找到currentTabText，修改其内容即可改变标签名字。在右上角的QTabWidget上右键即可实现添加标签、删除标签、修改标签顺序。</p>
</li>
<li><p>5.Stacked Widget栈容器<br>  向核心容器拖入一个Stacked Widget后，将Tool Box索引表容器拖入栈容器中，点击栈容器的右箭头，向空白页拖入Scroll Area滚动区域容器，在栈容器上右键-&gt;插入页，将Tab Widget标签容器拖入，运行后发现没有箭头出现，无法切换。需要另设三个按钮，通过信号和槽进行页面切换，给三个按钮更改名称为btn_xxx，在widget.cpp构造函数中增加如下代码：</p>
  <figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//ScrollArea切换</span></span><br><span class="line"><span class="built_in">connect</span>(ui-&gt;btn_scroll, &amp;QPushButton::clicked, [=]()&#123;</span><br><span class="line">    ui-&gt;stackedWidget-&gt;<span class="built_in">setCurrentIndex</span>(<span class="number">0</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//TabWidget切换</span></span><br><span class="line"><span class="built_in">connect</span>(ui-&gt;btn_tab, &amp;QPushButton::clicked, [=]()&#123;</span><br><span class="line">    ui-&gt;stackedWidget-&gt;<span class="built_in">setCurrentIndex</span>(<span class="number">1</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//Tool Box切换</span></span><br><span class="line"><span class="built_in">connect</span>(ui-&gt;btn_tool, &amp;QPushButton::clicked, [=]()&#123;</span><br><span class="line">    ui-&gt;stackedWidget-&gt;<span class="built_in">setCurrentIndex</span>(<span class="number">2</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>  但是运行后发现，首页并非索引为0的页面，而是设计页面的首页，为了避免这种情况，我们需要设置默认值：<code>ui-&gt;stackedWidget-&gt;setCurrentIndex(0);</code></p>
</li>
<li><p>6.Frame与Widget与Dock Widegt<br>  Frame是边框，Widget主要用来布局,Dock Widegt是铆接部件。</p>
</li>
</ul>
<h2 id="8-6-Input-Widget输入窗口"><a href="#8-6-Input-Widget输入窗口" class="headerlink" title="8.6.Input Widget输入窗口"></a>8.6.Input Widget输入窗口</h2><ul>
<li>1.Combo Box下拉框<br>  向主体Widget拖入Combo Box下拉框，选中下拉框，在右下角QObjectName下可以修改类名，在widget.cpp的构造函数添加以下代码：  <figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">ui-&gt;comboBox-&gt;<span class="built_in">addItem</span>(<span class="string">&quot;奔驰&quot;</span>);</span><br><span class="line">ui-&gt;comboBox-&gt;<span class="built_in">addItem</span>(<span class="string">&quot;宝马&quot;</span>);</span><br><span class="line">ui-&gt;comboBox-&gt;<span class="built_in">addItem</span>(<span class="string">&quot;路虎&quot;</span>);</span><br><span class="line"><span class="comment">//点击路虎按钮，定位到路虎</span></span><br><span class="line"><span class="built_in">connect</span>(ui-&gt;btn_combo, &amp;QPushButton::clicked,[=]()&#123;</span><br><span class="line">    <span class="comment">//索引定位</span></span><br><span class="line">    <span class="comment">//ui-&gt;comboBox-&gt;setCurrentIndex(2);</span></span><br><span class="line">    <span class="comment">//确定路虎存在的话</span></span><br><span class="line">    ui-&gt;comboBox-&gt;<span class="built_in">setCurrentText</span>(<span class="string">&quot;路虎&quot;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li>
<li>2.Font Combo Box字体下拉框</li>
<li>3.Line Edit单行输入框<br>可以在右下角的echoMode中选择password使输入不可见。</li>
<li>4.Text Edit多行编辑输入框<br>输入内容过多时会在右边自动出现滚动轴，同时支持各种文字特效</li>
<li>5.Plain Text Edit<br>纯文本输入框，不支持文字特效</li>
<li>6.Spain Box上下箭头变换数字框</li>
<li>7.Double Spain Box上下箭头变换double数字框</li>
<li>8.Time Edit时间输入框</li>
<li>9.Date Edit日期输入框</li>
<li>10.Date&#x2F;Time Edit日期&#x2F;时间输入框</li>
<li>11.Horizontal Scroll Bar水平滚动条</li>
<li>12.Vertical Scroll Bar垂直滚动条</li>
<li>13.Horizontal Slider水平滚动轴</li>
<li>14.Vertical Slider垂直滚动轴</li>
</ul>
<h2 id="8-7-Display-Widget展示窗口"><a href="#8-7-Display-Widget展示窗口" class="headerlink" title="8.7.Display Widget展示窗口"></a>8.7.Display Widget展示窗口</h2><ul>
<li>1.Label标签<br>可以通过setText设置默认显示文本，也可以手动输入，可在右下角的QFrame中修改framShape实现不同的边框。还能显示图片，甚至动图，修改标签类名为label_img,在widget.cpp添加如下代码：<figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//利用Label显示图片</span></span><br><span class="line">ui-&gt;label_img-&gt;<span class="built_in">setPixmap</span>(<span class="built_in">QPixmap</span>(<span class="string">&quot;:/img/new.svg&quot;</span>));</span><br><span class="line"><span class="comment">//利用Label显示动图</span></span><br><span class="line">QMovie * mv = <span class="keyword">new</span> <span class="built_in">QMovie</span>(<span class="string">&quot;:/img/save.svg&quot;</span>);</span><br><span class="line">ui-&gt;label_img-&gt;<span class="built_in">setMovie</span>(mv);</span><br><span class="line"><span class="comment">//播放</span></span><br><span class="line">mv-&gt;<span class="built_in">start</span>();</span><br></pre></td></tr></table></figure></li>
</ul>
<h1 id="9-自定义控件——修改值滚动条动，滚动条动值修改"><a href="#9-自定义控件——修改值滚动条动，滚动条动值修改" class="headerlink" title="9.自定义控件——修改值滚动条动，滚动条动值修改"></a>9.自定义控件——修改值滚动条动，滚动条动值修改</h1><p>新建项目small_widget，右键-&gt;Add New-&gt;<strong>Qt设计师界面类</strong>-&gt;smallWidget,向smallwidget.ui拖入Spin Box和Horizontal Slider,水平布局，再向widget.ui拖入Containers的widget，右键-&gt;<strong>提升为</strong>-&gt;两个widget的基类都是QWidget,类名smallWidget,选中全局包含（以后可以直接提升—）-&gt;添加-&gt;提升，右上角类名变为smallWidget，说明提升成功。<br>打开smallwidget.cpp,在构造函数里添加代码：</p>
<figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//QSpinBox动，QSlider跟着动</span></span><br><span class="line"><span class="built_in">void</span>(QSpinBox::* spinSignal)(<span class="type">int</span>) = &amp;QSpinBox::valueChanged;</span><br><span class="line"><span class="built_in">connect</span>(ui-&gt;spinBox, spinSignal, ui-&gt;horizontalSlider, &amp;QSlider::setValue);</span><br><span class="line"><span class="comment">//QSlider动，QSpinBox跟着动</span></span><br><span class="line"><span class="built_in">connect</span>(ui-&gt;horizontalSlider, &amp;QSlider::valueChanged, ui-&gt;spinBox, &amp;QSpinBox::setValue);</span><br></pre></td></tr></table></figure>
<p>向widget.ui拖入两个QPushButton，命名为“获取当前值”和“设置到一半”，打开smallwidget.h，在public:下提供接口：</p>
<figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="type">void</span> <span class="title">setData</span><span class="params">(<span class="type">int</span> val)</span></span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">int</span> <span class="title">getData</span><span class="params">()</span></span>;</span><br></pre></td></tr></table></figure>
<p>打开smallwidget.cpp,添加接口的实现：</p>
<figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="type">void</span> <span class="title">smallWidget::setData</span><span class="params">(<span class="type">int</span> val)</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    ui-&gt;spinBox-&gt;<span class="built_in">setValue</span>(val);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">int</span> <span class="title">smallWidget::getData</span><span class="params">()</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="keyword">return</span> ui-&gt;spinBox-&gt;<span class="built_in">value</span>();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>spinBox的值一改变就会发送valueChanged信号，进而QPlider就会变化，但我们还需要将点击按钮的信号和这两个函数连接起来才能触发效果,先在widget.ui里设置两个按钮的类名为btn_sethalf和btn_get，之后回到widget.cpp的构造函数里添加以下代码：</p>
<figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//设置值为一半</span></span><br><span class="line"><span class="built_in">connect</span>(ui-&gt;btn_sethalf, &amp;QPushButton::clicked, [=]()&#123;</span><br><span class="line">	ui-&gt;small_widget-&gt;<span class="built_in">setData</span>(<span class="number">50</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//获取当前值</span></span><br><span class="line"><span class="built_in">connect</span>(ui-&gt;btn_get, &amp;QPushButton::clicked, [=]()&#123;</span><br><span class="line">	<span class="built_in">qDebug</span>()&lt;&lt;ui-&gt;small_widget-&gt;<span class="built_in">getData</span>();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<hr>

        
            <div class="donate-container">
    <div class="donate-button">
        <button id="donate-button">赞赏</button>
    </div>
    <div class="donate-img-container hide" id="donate-img-container">
        <img id="donate-img" src="" data-src="/myblog/img/donate.jpg">
        <p> 感谢鼓励 </p>
    </div>
</div>
        
        <br />
        <div id="comment-container">
        </div>
        <div id="disqus_thread"></div>
        <div id="lv-container"></div>
        <div class="giscus"></div>
    </div>
</div>

    </div>
</div>


<footer class="footer">
    <ul class="list-inline text-center">
        
        

        

        

        
        <li>
            <a target="_blank"  href="https://github.com/samuel-24276">
                            <span class="fa-stack fa-lg">
                                <i class="iconfont icon-github"></i>
                            </span>
            </a>
        </li>
        

        

    </ul>
    
    <p>
        <span>/</span>
        
        <span><a target="_blank" rel="noopener" href="https://github.com/samuel-24276">samuel-24276&#39;s Page</a></span>
        <span>/</span>
        
        <span><a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/">北京-未备案</a></span>
        <span>/</span>
        
        <span><a href="#">返回顶部</a></span>
        <span>/</span>
        
    </p>
    
    <p>
        <span id="busuanzi_container_site_pv">
            <span id="busuanzi_value_site_pv"></span>PV
        </span>
        <span id="busuanzi_container_site_uv">
            <span id="busuanzi_value_site_uv"></span>UV
        </span>
        Created By <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>  Theme <a target="_blank" rel="noopener" href="https://github.com/aircloud/hexo-theme-aircloud">AirCloud</a></p>
</footer>




</body>

<script>
    // We expose some of the variables needed by the front end
    window.hexo_search_path = "search.json"
    window.hexo_root = "/myblog/"
    window.isPost = true
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script src="/myblog/js/index.js"></script>

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>






    <script type="text/javascript">
       (function() {
           if (typeof LivereTower === 'function') { return; }

           var j, d = document.getElementById('lv-container');

           d.setAttribute('data-id','city');
           d.setAttribute('data-uid' , 'MTAyMC80OTA5OC8yNTU5Mw==');

           j = document.createElement('script');
           j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
           j.async = true;

           d.appendChild(j);
       })();
    </script>
    <noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
    </div>

</html>
